<template>
	<my_live :danmu="data.danmu" @handleAnimation="handleAnimation()">
		<template v-slot:uni-form>
			<view class="uni-form-item uni-column">
				<input v-model="inputValue" class="uni-input" focus placeholder="和主播聊聊..." confirm-type="search"
					@confirm="doSearch()" />
				<text class="text" @click="onSend()">发送</text>
			</view>
		</template>
	</my_live>
</template>

<script setup>

import { ref, reactive } from 'vue'
import { onLoad, onShow } from '@dcloudio/uni-app'
const inputValue = ref('')
const data = reactive({
	userinfo: '',
	// 连接状态
	isSocket: false,
	// 连接失败的时候发送的信息
	offData: [],
	danmu: [

		{
			id: 'a2',
			name: '李四',
			comment: '你好',
			img: 'http://10.31.71.52:7002/public/static/c1.png'

		},
		{
			id: 'a1',
			name: '张三',
			comment: '来啦老弟',
			img: 'http://10.31.71.52:7002/public/static/c2.png'

		},
		{
			id: 'a3',
			name: '王五',
			comment: '哈喽',
			img: 'http://10.31.71.52:7002/public/static/c3.png'
		},
	],
})
const handleAnimation = ()=>{
	// console.log();
	let val = '用户点亮了爱心'
	uni.sendSocketMessage({//连接状态没问题发送送消息，只能传string
			data: JSON.stringify({
				name:'系统消息' ,
				comment:val,
			}),
		});

}
// 创建连接
const initSocket = async () => {
	// 建立连接
	uni.connectSocket({
		url: 'ws://10.31.71.55:8000',
		header: {
			name: data.userinfo.nickname
		},
	});
	uni.onSocketOpen((res) => {//连接成功，在这里可以吧连接失败的时候的信息在这里发送
		console.log('WebSocket连接已打开！', res);
	});

	uni.onSocketError((res) => {
		console.log('WebSocket连接打开失败，请检查！错误信息：', res);
	});
	uni.onSocketMessage((res) => {//连接成功，接收服务器返回数据
		data.isSocket = true
		console.log('收到服务器内容：' + res.data);
		data.danmu.push({
			id: getUuid(),
			...JSON.parse(res.data)
		})
		// this.messageList = [...this.messageList, JSON.parse(res.data)]
	});

	uni.onSocketClose(function (res) {
		data.isSocket = false
		initSocket()//断开连接，会重连
		console.log('WebSocket 已关闭！', res);
	});

}
//发送消息
//  const 	= async () => { // 发送消息
// 后期判断连接状态

// uni.sendSocketMessage({ // 开始发送socket消息
// 	data: JSON.stringify({
// 		user: '吴文斌',
// 		content: inputValue.value
// 	}),
// 	success: () => {
// 	}
// });
// }
// 生成随机id
const getUuid = () => {
	var s = [];
	var hexDigits = "ABCDEFGHIJKLMNOPQRSTUVWXYZ"
	for (var i = 0; i < 16; i++) {
		s[i] = hexDigits.substr(Math.floor(Math.random() * 0x10), 1)
	}

	let uuid = s.join("")
	return uuid
}
// 进入直播间触发
onLoad(() => {
	const name = uni.getStorageSync('user')
	data.userinfo = JSON.parse(name)
	initSocket()
})
// 按下发送消息
function doSearch(name=data.userinfo.nickname,values=inputValue.value) {
	if (inputValue.value === ''&&!values) return
	if (data.isSocket) {
		uni.sendSocketMessage({//连接状态没问题发送送消息，只能传string
			data: JSON.stringify({
				name:name ,
				comment:values,
				img: data.userinfo.avatar,
			}),
			success: () => {
				inputValue.value = ''
			}
		});
	} else {
		data.offData.push({
				name:name ,
				comment:values,
				img: data.userinfo.avatar,
			})
	}
	// 在评论多的时候要删掉顶部的评论
	if (data.danmu.length >= 10) {
		data.danmu.shift()
	}
}
const onSend = () => {
	console.log('NIHAO');
	doSearch()
}
</script>

<style lang="scss" scoped >
.uni-input {
	border: 1px solid rgb(179, 179, 179);
	background: rgba(82, 82, 82, 0.8);
	height: 60rpx;
	border-radius: 40rpx;
	padding-left: 10rpx;
	color: white;
	width: 50vw;
}

.uni-form-item {
	display: flex;
	align-items: center;

}

.text {
	// height: 60rpx;
	line-height: 60rpx;
	background: #FD6348;
	color: white;
	width: 120rpx;
	text-align: center;
	border-radius: 60rpx;
	margin-left: 10rpx;
}
</style>
